<template>
	<view>
		<!-- 出行路途 -->


		<view class="travel_item" :class="'programme' + programme">

			<view class="travel_address travel_start FlexAlign" v-if="schedule[0]">
				<view class="travel_icon FlexRow">
					<i v-if="programme > 1" class="iconfont icon-a-lujing4"></i>
				</view>
				<view class="ftit">
					{{schedule[0].title || ''}}
				</view>
			</view>


			<view class="travel_more FlexAlign" @click.stop="lookroad">
				<view class="txt">
					途经{{schedule.length || 0}}个站点
				</view>
				<i class="iconfont icon-xiangyoujiantou"></i>
			</view>

			<view class="travel_address travel_end FlexAlign" v-if="schedule[schedule.length - 1]">
				<view class="travel_icon FlexRow">
					<i v-if="programme > 1" class="iconfont icon-a-lujing4"></i>
				</view>
				<view class="ftit">
					{{schedule[schedule.length - 1].title || ''}}
				</view>
			</view>


		</view>

		<!-- 
		 
		 
		 -->
		<pupovercoat ref="ref_trave" :iscustom="true" :ptitle="`途径${schedule.length}个站点`" :ThemeType="ThemeType"
		:zindex="999999" @close="pupClose"
			pcontstyle="margin: 16rpx 0 50rpx 0;" confirmtxt="知道了">
			<template slot="content">
				
					<view class="travel_pup ">
						<view class="pup_Txt">
							{{ remark }}
						</view>
						<scroll-view style="max-height: 60vh;" scroll-y="true" >
							<view class="travel_list">
								<view class="travel_line FlexAlign" v-for="(item, index) in schedule"
									:class="{ 'the_start': index == 0, 'the_end': index == schedule.length - 1 }">
									<view class="icon">
										<template v-if="index == 0 || index == schedule.length - 1">
											<i class="iconfont icon-a-lujing4"></i>
										</template>
										<template v-else>
											<view class="circle"></view>
										</template>
									</view>
									<view class="content">
										{{ item.title }}
									</view>
									<view class="time" v-if="index == 0">
										{{ item.arrive_hour || '' }}出发
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				

			</template>
		</pupovercoat>
		<!--  -->

	</view>
</template>


<script>
import pupovercoat from "@/bundle4/components/pupovercoat.vue"
export default {
	components: {
		pupovercoat,
	},
	props: {
		remark: {
			type: String,
			default: '',
		},
		schedule: {
			type: Array,
			default: ()=>{
				return []
			}
		},
		ThemeType: {
			type: Number,
			default: 2,
		},
		programme: {
			type: Number,
			default: 1,
		}
	},
	data() {
		return {
			ptitle: '途径5个站点',
			ptext: '全程预计用时1小时41分钟，路线以实际行驶路线为准',
			travelList: [
				{
					title: '乐从交通中心公交站（(往鹤山方...',
					arrive_hour: '14:00出发',
				},
				{
					title: '乐从家具博览中心公交站(往鹤...',
				},
				{
					title: '鹤山汇源新都公交站',
				},
				
			],

		}
	},
	methods: {
		// 查看途径
		lookroad() {
			if (this.$refs.ref_trave) {
				this.$refs.ref_trave.pupshow = true
				
			}
		},
		pupClose(){
			
		},

	},

}
</script>

<style lang="scss" scoped>
@import "@/bundle4/css/Flex.scss";


.travel_pup {
	.pup_Txt {
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		margin-bottom: 50rpx;
	}

	.travel_list {

		.travel_line {
			width: 100%;
			margin-bottom: 70rpx;

			&:last-of-type {
				margin-bottom: 0;
			}

			&.the_end {
				.icon i {
					color: #F5AD03;
				}
			}

			.icon {
				width: 60rpx;

				i {
					font-size: 35rpx;
					color: #0AAF73;
				}

				.circle {
					margin-left: 14rpx;
					border-radius: 100%;
					width: 16rpx;
					height: 16rpx;
					background: #E5E9EB;
				}
			}

			.content {
				flex: 1;

				font-size: 28rpx;
				font-weight: 400;
				line-height: 30rpx;
				color: rgba(38, 38, 38, 1);

			}

			.time {
				width: 180rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(38, 38, 38, 1);

			}
		}
	}

}



.travel_item {
	width: 100%;
	position: relative;
	z-index: 10;

	.travel_address {
		width: 100%;
	}

	.ftit {
		max-width: 250rpx;
		font-size: 28rpx;
		font-weight: 700;
		color: #444444;
	}

	.travel_more {
		max-width: 250rpx;
		color: rgba(153, 153, 153, 1);

		.txt {
			font-size: 22rpx;
			font-weight: 400;
			color: inherit;
			text-align: left;
			vertical-align: top;
		}

		i {
			color: inherit;
			font-size: 18rpx;
			margin-left: 4rpx;
		}
	}

	&.programme1 {
		.travel_icon {
			width: 16rpx;
			height: 16rpx;
			border-radius: 100%;
			background: #0AAF73;
			margin-right: 8rpx;
		}

		.travel_more {
			margin: 15rpx 0;

			&::before {
				content: '';
				display: block;
				width: 1px;
				height: 26rpx;
				background: #D4D4D4;
				margin-right: 16rpx;
				margin-left: 8rpx;
			}

		}

		.travel_end .travel_icon {
			background: #F5AD03;
		}
	}

	&.programme2 {
		.ftit {
			color: #fff;
		}

		.travel_icon {

			width: 44rpx;
			height: 44rpx;
			border-radius: 100%;
			background: #0AAF73;
			margin-right: 14rpx;

			i {
				color: #fff;
				font-size: 20rpx;
			}
		}

		.travel_more {
			margin: 26rpx 0;
			position: relative;
			padding-left: 58rpx;
			color: rgba(255, 255, 255, .6);

			&::before {
				content: '';
				display: block;
				position: absolute;
				height: 56rpx;
				width: 1rpx;
				background: none;
				opacity: 0.5;
				left: 18rpx;
				border-right: 2rpx dashed #FFFFFF;
			}
		}

		.travel_end .travel_icon {
			background: #F5AD03;
		}
	}

	&.programme3 {

		.ftit {
			color: #262626;
		}

		.travel_icon {
			background: none !important;
			margin-right: 12rpx !important;

			i {
				color: #F5AD03;
				font-size: 30rpx;
			}
		}

		.travel_more {
			margin: 26rpx 0;
			position: relative;
			padding-left: 58rpx;
			color: #999999;

			&::before {
				content: '';
				display: block;
				position: absolute;
				height: 56rpx;
				width: 1rpx;
				background: none;
				left: 16rpx;
				border-right: 2rpx dashed #E5E5E5;
			}
		}

		.travel_start {
			.ftit {
				color: #0AAF73 !important;
			}

			.travel_icon i {
				color: #0AAF73 !important;
			}
		}
	}








}
</style>